<template>
  <el-form label-width="100px">
    <el-form-item label="spu名称">
      <span>{{ spuName }}</span>
    </el-form-item>
    <el-form-item label="sku名称">
      <el-input
        type="text"
        placeholder="请输入sku名称"
        v-model="skuInfo.skuName"
      ></el-input>
    </el-form-item>
    <el-form-item label="价格">
      <el-input
        type="number"
        placeholder="请输入sku价格"
        v-model="skuInfo.price"
      ></el-input>
    </el-form-item>
    <el-form-item label="重量(kg)">
      <el-input
        type="number"
        placeholder="请输入sku重量"
        v-model="skuInfo.weight"
      ></el-input>
    </el-form-item>
    <el-form-item label="描述">
      <el-input
        type="textarea"
        rows="4"
        placeholder="请输入sku描述"
        v-model="skuInfo.skuDesc"
      ></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form inline>
        <el-form-item
          :label="attr.attrName"
          v-for="attr in attrValueList"
          :key="attr.id"
        >
          <el-select v-model="attr.attrAndValId">
            <el-option
              :label="val.valueName"
              :value="attr.id + ':' + val.id"
              v-for="val in attr.attrValueList"
              :key="val.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form inline>
        <el-form-item
          :label="attr.saleAttrName"
          v-for="attr in saleAttrValueList"
          :key="attr.id"
        >
          <el-select v-model="attr.saleAttrValueId">
            <el-option
              :label="val.name"
              :value="val.id"
              v-for="val in attr.spuSaleAttrValueList"
              :key="val.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片列表">
      <el-table
        ref="multipleTable"
        :data="imageList"
        style="width: 100%"
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="图片">
          <template slot-scope="{ row }">
            <img :src="row.imgUrl" style="width: 100px; height: 80px" />
          </template>
        </el-table-column>
        <el-table-column prop="imgName" label="名称"> </el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="{ row }">
            <el-tag type="success" v-if="row.isDefault === '1'">默认</el-tag>
            <el-button
              type="primary"
              size="mini"
              v-else
              @click="setDefault(row)"
              >设为默认</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button type="primary" @click="saveSkuInfo">保存</el-button>
        <el-button @click="$emit('toback')">取消选择</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "SkuForm",
  data() {
    return {
      xxx: "",
      spuName: "",
      skuInfo: {
        skuName: "",
        price: 0,
        weight: "",
        skuDesc: "",
        skuAttrValueList: [],
        skuSaleAttrValueList: [],
        skuImageList: [],
        isSale: 0,
        skuDefaultImg: "",
        spuId: 0,
        tmId: 0,
        category3Id: 0,
      },
      category1Id: "",
      category2Id: "",
      attrValueList: [],
      saleAttrValueList: [],
      imageList: [],
      selectImgList: [],
    };
  },
  methods: {
    addSkuInfoData(spuInfo) {
      this.spuName = spuInfo.spuName;
      this.skuInfo.spuId = spuInfo.id;
      this.skuInfo.tmId = spuInfo.tmId;
      this.skuInfo.category3Id = spuInfo.category3Id;
      this.category1Id = spuInfo.category1Id;
      this.category2Id = spuInfo.category2Id;
      this.getInitData();
    },
    //初始化数据
    async getInitData() {
      const {
        category1Id,
        category2Id,
        skuInfo: { category3Id, spuId },
      } = this;
      const promise1 = await this.$api.attr.getCategory(
        category1Id,
        category2Id,
        category3Id
      );
      const promise2 = await this.$api.sku.getSpuSaleAttrList(spuId);
      const promise3 = await this.$api.sku.getSpuImageList(spuId);

      let result = await Promise.all([promise1, promise2, promise3]);

      this.attrValueList = result[0].data;
      this.saleAttrValueList = result[1].data;
      const imageList = result[2].data;
   
      imageList.forEach((item) => {
        item.isDefault = "0";
      });
      imageList[0].isDefault = "1";
      this.imageList = imageList;
      this.skuInfo.skuDefaultImg = imageList[0].imgUrl
      console.log( 1,this.skuInfo.skuDefaultImg )
      this.$nextTick(() => {
        this.$refs.multipleTable.toggleRowSelection(this.imageList[0]);
      });
      this.imageList = imageList;
    
    },

    setDefault(img) {
      this.imageList.forEach((item) => {
        item.isDefault = "0";
      });
      img.isDefault = "1";
      this.skuInfo.skuDefaultImg = img.imgUrl;
      this.$refs.multipleTable.clearSelection();
      this.$refs.multipleTable.toggleRowSelection(img);
    },
    handleSelectionChange(val) {
      this.selectImgList = val;
    },
   async saveSkuInfo() {
      this.skuInfo.skuAttrValueList = this.attrValueList.reduce((pre, item) => {
        if (item.attrAndValId) {
          const [attrId, valueId] = item.attrAndValId.split(":");
          pre.push({ attrId, valueId });
        }
        item.attrAndValId = "";
        return pre;
      }, []);

      this.skuInfo.skuSaleAttrValueList = this.saleAttrValueList.reduce(
        (pre, item) => {
          if (item.saleAttrValueId) {
            const saleAttrValueId = item.saleAttrValueId;
            pre.push({ saleAttrValueId });
          }
          item.saleAttrValueId = "";
          return pre;
        },
        []
      );
     
      
      this.skuInfo.skuImageList = this.selectImgList.map((item) => {
        return {
          imgUrl: item.imgUrl,
          imgName: item.imgName,
          isDefault: item.isDefault,
          spuImgId: item.id,
        };
      });
     
       let result= await this.$api.sku.addOrUpdateSkuInfo(this.skuInfo);
        if(result.code  == 200){
          this.$message.success("操作成功");
        this.$emit("toback");
        this.$emit("success");
        this.repeatData()
        }
    },

    repeatData() {
      this.spuName = "";
      (this.skuInfo = {
        skuName: "",
        price: 0,
        weight: "",
        skuDesc: "",
        skuAttrValueList: [],
        skuSaleAttrValueList: [],
        skuImageList: [],
        isSale: 0,
        skuDefaultImg: "",
        spuId: 0,
        tmId: 0,
        category3Id: 0,
      }),
        (this.category1Id = "");
      this.category2Id = "";
      this.attrValueList = [];
      this.saleAttrValueList = [];
      this.imageList = [];
      this.selectImgList = [];
    },
  },
};
</script>

<style scoped>
</style>